import React from 'react';
import ReactLoading from 'react-loading';
import './index.scss';
import {action, observable} from "mobx";
import {observer} from "mobx-react";
import * as ReactDOM from "react-dom";

@observer
class ImageLoadable extends React.Component {
    #imageRef;
    @observable imageLoadState;
    @observable imageSrc;
    @observable imageClassState;

    @action
    componentDidMount() {
        setTimeout(async () => {
            this.imageSrc = this.props?.src;
            this.#imageRef?.setAttribute('src', this.imageSrc);
            this.imageLoad();
        });
    }

    componentWillReceiveProps() {
        setTimeout(async () => {
            this.imageSrc = this.props?.src;
            this.#imageRef?.setAttribute('src', this.imageSrc);
            this.imageLoad();
        });
    }

    @action
    imageLoad() {
        let src = this.#imageRef?.getAttribute('src');

        if (this.#imageRef?.complete || !src) {
            let {onLoad, onError} = this.props;

            if (src) {
                onLoad?.();
            } else {
                onError?.();
            }

            try {
                ReactDOM.unmountComponentAtNode(this.#imageRef);
            } catch (e) {

            }

            // if (this.props.auto) {
            //     switch (this.props.auto) {
            //         case 'tile': {
            //             let $img = $(this.#imageRef);
            //             let width = $img.naturalWidth();
            //             let height = $img.naturalHeight();
            //            
            //             break;
            //         }
            //     }
            // }

            this.#imageRef && (this.#imageRef.onload = null);
            this.#imageRef?.remove();
            this.imageLoadState = true;
            this.imageClassState = 'success';
        }
    }

    @action
    imageError() {
        let {onError} = this.props;
        onError?.();

        try {
            ReactDOM.unmountComponentAtNode(this.#imageRef);
        } catch (e) {

        }
        this.#imageRef && (this.#imageRef.onload = null);
        this.#imageRef?.remove();
        this.imageLoadState = true;
        this.imageClassState = 'fail';
    }

    componentWillUpdate() {

    }

    render() {
        let {className = ''} = this.props;

        return (
            <div className={[
                "image-loadable",
                "flex-start",
                className || '',
                this.imageLoadState ? 'completed' : '',
                this.imageClassState || ''
            ].filter(Boolean).join(' ')} style={{
                backgroundImage: this.imageLoadState ? `url('${this.imageSrc}')` : ''
            }}>
                <picture>
                    <img ref={_ => this.#imageRef = _}
                         onLoad={this.imageLoad.bind(this)}
                         onError={this.imageError.bind(this)}
                         style={{display: 'none'}}
                    />
                </picture>
                {
                    !this.imageLoadState ?
                        (<ReactLoading className={"img-loading"} type={'spin'} color="#ddd"/>)
                        : null
                }
            </div>
        );
    }
}

export default ImageLoadable;